<template>
    <div class="manage" style="width: 1200px;margin: 0 auto;height:100%">
      <!-- 管理页 -->
      <el-tabs type="border-card">
        <el-tab-pane label="系统管理">
          <div class="system-manage-container" style="display: flex;width:100%;justify-content:space-around">
            <div class="left">
              <el-card class="box-card" style="margin-top:10px;width: 550px">
                <div slot="header" class="clearfix">
                  <span class="title">标签管理</span>
                </div>
                <!-- 标签管理 -->
                <div class="buttons" style="margin-bottom: 10px">
                  <el-button @click="AddTagDialog" size="small" type="primary">添加标签</el-button>
                </div>
                <el-table :data="tagTableData" height="600" style="width: 100%" size="medium">
                  <el-table-column type="index" label="序号" width="150"></el-table-column>
                  <el-table-column prop="tagName" label="标签名"></el-table-column>
                  <el-table-column width="210" label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        @click="tagEditDialog(tagTableData[scope.$index].tagId)"
                        type="primary"
                        size="small"
                      >编辑</el-button>
                      <el-button
                        @click="deleteTag(tagTableData[scope.$index].tagId)"
                        type="danger"
                        size="small"
                      >删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
  <!-- 
                  <div class="paginationbox">
                  <el-pagination
                    :page-size="tagConfig.pageSize"
                    :pager-count="11"
                    layout="prev, pager, next"
                    @current-change="handleCurrentTagChange"
                    :current-page="tagConfig.currentPage"
                    :total="100"
                  ></el-pagination>
                </div>
    --->
              </el-card>
            </div>
            <div class="right">
              <div class="top">
                <el-card style="margin-top:10px;width:550px">
                  <div slot="header" class="clearfix">
                    <span class="title">各类型在检索中的权重占比</span>
                  </div>
                  <div class="block">
                    <span class="demonstration">标题</span>
                    <el-slider v-model="value0" @change="com" show-input></el-slider>
                  </div>
                  <div class="block">
                    <span class="demonstration">标签</span>
                    <el-slider v-model="value1" @change="com" show-input></el-slider>
                  </div>
                  <div class="block">
                    <span class="demonstration">文章类型</span>
                    <el-slider v-model="value2" @change="com" show-input></el-slider>
                  </div>
                  <div class="block">
                    <span class="demonstration">时间</span>
                    <el-slider v-model="value3" @change="com" show-input></el-slider>
                  </div>
                  <div class="block">
                    <span class="demonstration">作者</span>
                    <el-slider v-model="value4" @change="com" show-input></el-slider>
                  </div>
                  <el-button type="primary" size="small" @click="searchWeight">确定修改</el-button>
                </el-card>
              </div>
              <div class="bottom" style="margin-top: 30px;">
                <el-card class="box-card" style="width: 550px;">
                  <div slot="header" class="clearfix">
                    <span class="title">文章自动保存的时间</span>
                  </div>
                  <div class="block">
                    <span class="demonstration">时间占比</span>
                    <el-slider v-model="value5" show-input></el-slider>
                  </div>
                  <el-button type="primary" size="small" @click="saveTime">确定修改</el-button>
                </el-card>
              </div>
            </div>
          </div>
        </el-tab-pane>
  
        <el-tab-pane label="人员管理">
          <el-card class="box-card" style="margin-top:-20px;margin-left:-20px;width: 1220px;">
            <div slot="header" class="clearfix">
              <span class="title">账号管理</span>
            </div>
            <!-- 账号管理 -->
            <div class="buttons" style="margin-bottom: 10px">
              用户名
              <el-input
                v-model="search"
                style="width: 200px;margin-right: 20px;padding-left: 5px"
                placeholder="请输入用户名"
              ></el-input>
              <el-button type="primary" style="margin-right: 5px" @click="getUserInfo" size="small">搜索</el-button>
              <el-button style="margin-right: 20px" @click="search=''" size="small">重置</el-button>
              <el-button @click="AddPersonDialog" type="primary" size="small">添加用户</el-button>
            </div>
            <el-table :data="accountTableData" height="600" style="width: 100%" size="mini">
              <el-table-column prop="userId" label="ID" width="80" align="center"></el-table-column>
              <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
              <el-table-column prop="roleName" label="用户角色" width="200" align="center">
                <template slot-scope="scope">
                  <el-tag
                    v-if="accountTableData[scope.$index].roleName==='普通用户' "
                    effect="dark"
                    type="success"
                    size="small"
                  >普通用户</el-tag>
                  <el-tag
                    v-if="accountTableData[scope.$index].roleName==='审核员' "
                    effect="dark"
                    type="info"
                    size="small"
                  >审核员</el-tag>
                  <el-tag
                    v-if="accountTableData[scope.$index].roleName==='管理员' "
                    effect="dark"
                    type="warning"
                    size="small"
                  >管理员</el-tag>
                </template>
              </el-table-column>
  
              <el-table-column prop="status" label="用户状态" width="200" align="center">
                <template slot-scope="scope">
                  <el-tag
                    v-if="accountTableData[scope.$index].status==='1' "
                    effect="dark"
                    type="danger"
                    size="small"
                  >禁用</el-tag>
                  <el-tag
                    v-if="accountTableData[scope.$index].status==='0' "
                    effect="dark"
                    type="success"
                    size="small"
                  >启用</el-tag>
                </template>
              </el-table-column>
  
              <el-table-column width="250" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="EditPersonDialog(accountTableData[scope.$index].userId)"
                    size="small"
                    type="primary"
                  >编辑</el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="deletePerson(accountTableData[scope.$index].userId)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="paginationbox">
              <el-pagination
                :page-size="accountConfig.pageSize"
                :pager-count="11"
                layout="prev, pager, next"
                @current-change="handleCurrentPersonChange"
                :current-page="accountConfig.currentPage"
                :total="1000"
              ></el-pagination>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
  
      <!-- 新增用户 -->
      <AddPersonDialog :dialogVisible.sync="addPersonDialogVisible" />
      <!-- 新增标签 -->
      <AddTagDialog :dialogVisible.sync="addTagDialogVisible" />
      <!-- 编辑标签 -->
      <EditTagDialog :dialogVisible.sync="editTagDialogVisible" :oldTag="TagId" />
      <!-- 编辑用户 -->
      <EditPersonDialog :dialogVisible.sync="editPersonDialogVisible" :oldId="oldId" />
    </div>
  </template>
    
    <script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  import AddPersonDialog from "@/views/admin/AddPersonDialog.vue";
  import EditPersonDialog from "@/views/admin/EditPersonDialog.vue";
  import AddTagDialog from "@/views/admin/AddTagDialog.vue";
  import EditTagDialog from "@/views/admin/EditTagDialog.vue";
  import {
    FindAdminTagByPage,
    FindAdminUserByPage,
    FindAdminTag,
    FindAdminUser,
    FindAdminUserBySearch,
    EditTag,
    AddTag,
    DeleteTag,
    SearchWeight,
    DeleteUser,
    autoSaveTime,
    getAllTags
  } from "../../apis/apis";
  import { computed } from "vue";
  import { dataTool } from "echarts";
  @Component({
    name: "FindPassword",
    components: {
      EditPersonDialog,
      EditTagDialog,
      AddTagDialog,
      AddPersonDialog
    }
  })
  export default class admin extends Vue {
    handleSizeChange: any;
    handleCurrentChange: any;
  
    value0: number = 50;
    value1: number = 50;
    value2: number = 50;
    value3: number = 50;
    value4: number = 50;
    value5: number = 50;
    total: number = 250;
  
    num0: number = 0;
    num1: number = 1;
    num2: number = 2;
    num3: number = 3;
    num4: number = 4;
  
    deleteTag(id: number) {
      console.log(id);
      //删除标签
      DeleteTag(id).then((res: any) => {
        console.log(res.data);
  
        if (res.data.code == "200") {
          this.$message({
            message: "删除成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "删除失败",
            type: "error"
          });
        }
      });
    }
    search: string = "";
    scope: any;
    TagId: number = 0;
    oldId: number = 1;
  
    tagTableData = [
      {
        tagId: 1,
        tagName: "IT"
      },
      {
        tagId: 2,
        tagName: "生活"
      }
    ];
  
    tagConfig = {
      currentPage: 1,
      pageSize: 10,
      total: 1000
    };
  
    accountTableData = [
      {
        userId: 1,
        userName: "qwe",
        roleName: "",
        status: ""
      }
    ];
  
    accountConfig = {
      currentPage: 1,
      pageSize: 10,
      total: 1000
    };
    //
  
    addPersonDialogVisible: boolean = false;
    addTagDialogVisible: boolean = false;
    editTagDialogVisible: boolean = false;
    editPersonDialogVisible: boolean = false;
  
    tagnRow: any = null;
    personRow: any = null;
    accountHandleSizeChange: any;
    accountHandleCurrentChange: any;
  
    //新增用户对话框
    AddPersonDialog(): void {
      this.addPersonDialogVisible = true;
    }
    //addTagDialogVisible = true;tagnRow = null
    //新增标签对话框
    AddTagDialog(): void {
      this.addTagDialogVisible = true;
    }
    //编辑标签
    tagEditDialog(tagid: number) {
      console.log(tagid);
      this.TagId = tagid;
      console.log(this.TagId);
      this.editTagDialogVisible = true;
    }
    //编辑用户
    EditPersonDialog(userId: number) {
      console.log(userId);
      this.oldId = userId;
      console.log(this.oldId);
      this.editPersonDialogVisible = true;
    }
    //删除用户
    deletePerson(userId: number) {
      console.log(userId);
      DeleteUser(userId)
        .then((res: any) => {
          console.log(res.data);
          if (res.data.code === "200") {
            this.$message({
              message: "删除成功",
              type: "success"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
    //根据用户名查找
    getUserInfo() {
      FindAdminUserBySearch(
        this.search,
        this.accountConfig.currentPage,
        this.accountConfig.pageSize
      ).then((res: any) => {
        console.log(res.data);
        this.accountTableData = res.data.data;
      });
    }
  
    //人员管理分页查询
    handleCurrentPersonChange(val: number): void {
      this.accountConfig.currentPage = val;
      console.log(this.accountConfig.currentPage);
      FindAdminUserByPage(
        this.accountConfig.currentPage,
        this.accountConfig.pageSize
      )
        .then((res: any) => {
          console.log(res.data.data);
          this.accountTableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  
    //标签管理分页查询
    handleCurrentTagChange(val: number): void {
      this.tagConfig.currentPage = val;
      console.log(this.tagConfig.currentPage);
      FindAdminTagByPage(this.tagConfig.currentPage, this.tagConfig.pageSize)
        .then((res: any) => {
          console.log(res.data.data);
          //this.accountTableData = res.data.data.tagTableData;
        })
        .catch(err => {
          console.log(err);
        });
    }
  
    //初始获取所有人员信息
    AdminGetAccountData(): void {
      console.log(this.accountConfig.currentPage);
      console.log(this.accountConfig.pageSize);
      FindAdminUserByPage(
        this.accountConfig.currentPage,
        this.accountConfig.pageSize
      )
        .then((res: any) => {
          console.log(res.data.data);
          this.accountTableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  
    //初始获取所有标签
    AdminGetTagData(): void {
     // console.log(this.tagConfig.currentPage);
     // console.log(this.tagConfig.pageSize);
      getAllTags().then((res:any)=>{
        console.log(res.data.data);
        this.tagTableData = res.data.data;
      }).catch( err => {
        console.log(err);
      })
    }
  
    mounted() {
      this.AdminGetTagData();
      this.AdminGetAccountData();
     // console.log(this.accountConfig.currentPage);
  
    }
  
    //计算总数
    public get computedMsg() {
      return this.value0 + this.value1 + this.value2 + this.value3 + this.value4;
    }
  
  
    //计算
    com(): void {
      this.total = this.computedMsg;
      this.num0 = this.value0 / this.total;
      this.num1 = this.value0 / this.total;
      this.num2 = this.value0 / this.total;
      this.num3 = this.value0 / this.total;
      this.num4 = this.value0 / this.total;
    }
  
    //检索权重
    searchWeight(): void {
      console.log(this.num0);
      SearchWeight(this.num0, this.num1, this.num2, this.num3, this.num4)
        .then((res: any) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message({
              message: "检索权重修改成功",
              type: "success"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  
    //自动保存
    saveTime(): void {
      console.log(this.value5);
      autoSaveTime(this.value5)
        .then((res: any) => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.$message({
              message: "自动保存时间修改成功",
              type: "success"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
  </script>